import React, { useState } from 'react';
import { Card, Row, Col, Button, DatePicker, Select, Table, Tag, Space, Progress } from 'antd';
import { 
  DownloadOutlined, 
  SearchOutlined, 
  ReloadOutlined,
  FileExcelOutlined,
  FilePdfOutlined,
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { RangePicker } = DatePicker;
const { Option } = Select;

interface ReportData {
  key: string;
  reportName: string;
  reportType: string;
  createTime: string;
  fileSize: string;
  status: string;
  downloadCount: number;
}

const ReportCenter: React.FC = () => {
  const [selectedReportType, setSelectedReportType] = useState<string>('all');
  const [dateRange, setDateRange] = useState<any>(null);

  const reportTypes = [
    { value: 'all', label: '全部报表' },
    { value: 'device', label: '设备报表' },
    { value: 'energy', label: '能耗报表' },
    { value: 'alarm', label: '告警报表' },
    { value: 'maintenance', label: '维护报表' },
    { value: 'operation', label: '运营报表' }
  ];

  const reportData: ReportData[] = [
    {
      key: '1',
      reportName: '设备运行状态月报',
      reportType: 'device',
      createTime: '2024-01-15 14:30:25',
      fileSize: '2.3MB',
      status: 'completed',
      downloadCount: 15
    },
    {
      key: '2',
      reportName: '能耗统计分析报表',
      reportType: 'energy',
      createTime: '2024-01-14 09:15:10',
      fileSize: '1.8MB',
      status: 'completed',
      downloadCount: 23
    },
    {
      key: '3',
      reportName: '告警事件统计报表',
      reportType: 'alarm',
      createTime: '2024-01-13 16:45:32',
      fileSize: '856KB',
      status: 'completed',
      downloadCount: 8
    },
    {
      key: '4',
      reportName: '设备维护记录报表',
      reportType: 'maintenance',
      createTime: '2024-01-12 11:20:15',
      fileSize: '1.2MB',
      status: 'generating',
      downloadCount: 0
    },
    {
      key: '5',
      reportName: '运营效率分析报表',
      reportType: 'operation',
      createTime: '2024-01-11 13:55:48',
      fileSize: '3.1MB',
      status: 'completed',
      downloadCount: 12
    }
  ];

  const columns: ColumnsType<ReportData> = [
    {
      title: '报表名称',
      dataIndex: 'reportName',
      key: 'reportName',
      render: (text: string) => <strong style={{ color: '#1890ff' }}>{text}</strong>,
    },
    {
      title: '报表类型',
      dataIndex: 'reportType',
      key: 'reportType',
      render: (type: string) => {
        const typeMap = {
          device: { color: 'blue', text: '设备报表' },
          energy: { color: 'green', text: '能耗报表' },
          alarm: { color: 'red', text: '告警报表' },
          maintenance: { color: 'orange', text: '维护报表' },
          operation: { color: 'purple', text: '运营报表' }
        };
        return <Tag color={typeMap[type as keyof typeof typeMap]?.color}>
          {typeMap[type as keyof typeof typeMap]?.text}
        </Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '文件大小',
      dataIndex: 'fileSize',
      key: 'fileSize',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        if (status === 'completed') {
          return <Tag color="success">已完成</Tag>;
        } else if (status === 'generating') {
          return <Tag color="processing">生成中</Tag>;
        } else if (status === 'failed') {
          return <Tag color="error">生成失败</Tag>;
        }
        return <Tag color="default">{status}</Tag>;
      },
    },
    {
      title: '下载次数',
      dataIndex: 'downloadCount',
      key: 'downloadCount',
      render: (count: number) => <span style={{ color: '#1890ff' }}>{count}</span>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record: ReportData) => (
        <Space size="middle">
          <Button 
            type="link" 
            icon={<DownloadOutlined />}
            disabled={record.status !== 'completed'}
            size="small"
          >
            下载
          </Button>
          <Button 
            type="text" 
            danger
            size="small"
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const handleGenerateReport = (type: string) => {
    console.log('生成报表:', type);
  };

  const handleExportData = (format: string) => {
    console.log('导出数据:', format);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Row gutter={[24, 24]}>
        <Col xs={24} lg={8}>
          <Card title="快速生成报表">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button 
                type="primary" 
                icon={<BarChartOutlined />}
                onClick={() => handleGenerateReport('device')}
                style={{ width: '100%' }}
              >
                设备运行报表
              </Button>
              <Button 
                icon={<LineChartOutlined />}
                onClick={() => handleGenerateReport('energy')}
                style={{ width: '100%' }}
              >
                能耗分析报表
              </Button>
              <Button 
                icon={<PieChartOutlined />}
                onClick={() => handleGenerateReport('alarm')}
                style={{ width: '100%' }}
              >
                告警统计报表
              </Button>
              <Button 
                icon={<FileExcelOutlined />}
                onClick={() => handleGenerateReport('maintenance')}
                style={{ width: '100%' }}
              >
                维护记录报表
              </Button>
            </Space>
          </Card>
        </Col>
        
        <Col xs={24} lg={8}>
          <Card title="报表统计">
            <div style={{ textAlign: 'center' }}>
              <Progress 
                type="dashboard" 
                percent={75} 
                width={120}
                format={percent => (
                  <div>
                    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>
                      {percent}%
                    </div>
                    <div style={{ fontSize: '12px', color: '#666' }}>完成率</div>
                  </div>
                )}
              />
              <div style={{ marginTop: '20px' }}>
                <Row gutter={16}>
                  <Col span={12}>
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#52c41a' }}>23</div>
                      <div style={{ fontSize: '12px', color: '#666' }}>已完成</div>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#faad14' }}>8</div>
                      <div style={{ fontSize: '12px', color: '#666' }}>生成中</div>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </Card>
        </Col>

        <Col xs={24} lg={8}>
          <Card title="数据导出">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button 
                icon={<FileExcelOutlined />}
                onClick={() => handleExportData('excel')}
                style={{ width: '100%' }}
              >
                导出Excel
              </Button>
              <Button 
                icon={<FilePdfOutlined />}
                onClick={() => handleExportData('pdf')}
                style={{ width: '100%' }}
              >
                导出PDF
              </Button>
              <Button 
                icon={<DownloadOutlined />}
                onClick={() => handleExportData('csv')}
                style={{ width: '100%' }}
              >
                导出CSV
              </Button>
            </Space>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: '24px' }}>
        <Col xs={24}>
          <Card title="报表列表">
            <div style={{ marginBottom: '16px' }}>
              <Row gutter={16}>
                <Col xs={24} sm={8} md={6}>
                  <Select 
                    value={selectedReportType} 
                    onChange={setSelectedReportType}
                    style={{ width: '100%' }}
                    placeholder="选择报表类型"
                  >
                    {reportTypes.map(type => (
                      <Option key={type.value} value={type.value}>
                        {type.label}
                      </Option>
                    ))}
                  </Select>
                </Col>
                <Col xs={24} sm={8} md={6}>
                  <RangePicker 
                    value={dateRange}
                    onChange={setDateRange}
                    style={{ width: '100%' }}
                    placeholder={['开始日期', '结束日期']}
                  />
                </Col>
                <Col xs={24} sm={8} md={6}>
                  <Space>
                    <Button type="primary" icon={<SearchOutlined />}>
                      搜索
                    </Button>
                    <Button icon={<ReloadOutlined />}>
                      重置
                    </Button>
                  </Space>
                </Col>
              </Row>
            </div>
            
            <Table 
              columns={columns} 
              dataSource={reportData} 
              pagination={{
                current: 1,
                pageSize: 10,
                total: reportData.length,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条记录`
              }}
              size="middle"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default ReportCenter;